<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery-3.6.0.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/vue-2.4.0.js"></script>
    <script src="js/vue-router-3.0.1.js"></script>
    <script>
        $(function () {
            var bgImg=['bg1.jpg','bg2.jpg','bg3.jpg'];
            var i=0;
            setInterval(function () {
                i++;
                $(".mybg").css("background-image","url(images/"+bgImg[i%3]+")");
                // layer.alert(++i,{icon:1});
            },1800)
        })
    </script>
    <script>
        $(function () {
            if($("#errorMsgId").val().length>0){
                if ($("#errorMsgId").val()=="注册成功") {
                    layer.alert($("#errorMsgId").val(),{icon:1});
                }else {
                    layer.alert($("#errorMsgId").val(),{icon:2});
                }

            }
        })
    </script>
</head>
<body>
    <div id="app">
        <div class="mybg" style="background-image: url(static/images/bg1.jpg); background-size: cover;height: 100vh;">
            <router-view></router-view>
            <input id="errorMsgId" type="hidden" th:value="${errorMsg}">
        </div>
    </div>
    <template id="loginTem">
        <div class="lrDiv">
            <div style="width: 80%;margin: auto;">
                <h1 style="margin-top: 30px;color: blue;text-align: center">欢迎登录</h1>
                <form class="layui-form layui-bg-cyan" style="padding-top: 60px;padding-bottom: 60px;" action="/doLogin" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input style="width: 300px;" type="text" name="name" required lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input style="width: 300px;" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="inputCode"  placeholder="请输入验证码" autocomplete="off" class="layui-input">
                        </div>
                        <img src="/defaultKaptcha" onclick="this.src='/defaultKaptcha?time='+new Date()" width="96" height="35" alt="" />
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo" >登录</button>
                            <router-link to="/registerTem" class="layui-btn" onclick="window.location.reload(true)"  style="background-color: #009688;">注册</router-link>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </template>
    <template id="registerTem">
        <div class="lrDiv">
            <div style="width: 80%;margin: auto;">
                <h1 style="margin-top: 30px;color: blue;text-align: center">欢迎注册</h1>
                <form class="layui-form layui-bg-cyan" method="post" style="padding-top: 30px;padding-bottom: 30px;" action="/doRegister">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input style="width: 280px" type="text" name="name" lay-verify="username" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input id="passwordId" style="width: 280px" type="password" name="password" required lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码</label>
                        <div class="layui-input-inline">
                            <input style="width: 280px" type="password" name="surepassword" required lay-verify="surepassword" placeholder="确认密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色</label>
                            <input type="radio" name="roleid" class="layui-input" value="1" title="受检人员" checked>
                            <input type="radio" name="roleid" class="layui-input" value="2" title="医护人员" >
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <router-link to="/loginTem" class="layui-btn" style="background-color: #009688;">登录</router-link>
                            <button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </template>
    <script>
        var loginTem={   //指定登录页面的模块
            template: "#loginTem"
        }
        var registerTem={   //指定登录页面的模块
            template: "#registerTem"
        }
        var router=new VueRouter({   //创建路由
            routes:[
                {path:"/",redirect:"/loginTem"},
                {path:"/loginTem",component:loginTem},
                {path:"/registerTem",component:registerTem}
            ]
        })
        var vm=new Vue({
            el: "#app",
            data:{},
            methods:{},
            router
        })
    </script>
    <script type="text/javascript">
        layui.use(['form', 'util'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;

            //自定义验证规则
            form.verify({
                username: function(value){
                    if(value.length < 2||value.length >6){
                        return '用户名长度2-6位';
                    }
                }
                ,pass: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
                ,surepassword: function(value){
                    if(value!=$("#passwordId").val()){
                        return '确认密码与密码不一致';
                    }
                }
            });

        });
    </script>
</body>
</html>